<template>
    <el-upload
        id="my-photo"
        :action="`${baseURL}users/updateImageUrl`"
        name='file'
        :data="params"
        :headers="headers"
        :show-file-list="false"
        accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG"
        :before-upload="checkType"
        :on-success="onSuccess"
    >
        <img v-if="imageUrl" class="uimage" :src="imageUrl">
        <i class="uicon" :class="{'el-icon-plus':!imageUrl,'el-icon-edit':imageUrl}"></i>
    </el-upload>
</template>
<script>
export default {
    data(){
        var user=this.$store.state.user
        var tokenObj=localStorage.token && JSON.parse(localStorage.token) ||{}
        return{
            baseURL:window.baseURL,
            imageUrl:user.headImgurl,
            //imageUrl:'https://gw.alicdn.com/tps/TB1W_X6OXXXXXcZXVXXXXXXXXXX-400-400.png',
            params:{
                type:"web",
                moduleName:'用户中心',
                userId:user.id
            },
            headers:{
                Authorization:tokenObj.authToken ||""
            },
            
        }
    },
    methods: {
        //请求已选图片列表
        getList(){
            var submitData={type:'web'}
            this.$http.getImgList(submitData)
            .then((res)=>{
                var  data=res.data.data
                if(!Array.isArray(data)){
                    throw(data)
                }
                var newData=data.map((item)=>{
                        item. url=item.picture
                        return item
                })
                this.imgList=newData
            }).catch((err)=>{
                this.$message.error("网络出错！")
                
            })
        },

        onSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
            this.$emit("updatePhoto",this.imageUrl)
        },

        checkType(imgData){
            var reg=/(.jpg|.jpeg|.png|.gif|.JPG|.JPEG)/g
            var result=imgData.name.match(reg)
            if(!result){
                this.$message.warning("上传失败：图片格式不支持!")
                return false
            }else if(imgData.size>1024*1024*2){
                this.$message.warning("上传失败：图片过大!")
                return false
            }
        },
    },
    created(){
      // this.getList()
    },
}
</script>
<style lang="scss" scoped>
#my-photo{
    height: 100%;
    position: relative;
    /deep/ .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left:0;
        margin: auto;
        width: 178px;
        height: 178px;
        display: block;
        overflow: hidden;
        &:hover{
            border-color: #409EFF;
        }
        .uimage {
            width: 178px;
            height: 178px;
        }
        .uicon{
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            font-size: 28px;
            color: #d8dee7;
            line-height: 178px;
            text-align: center;
            transition: all 0.3s;
        }

        .el-icon-edit{
            opacity: 0;
            background-color: rgba(72,105,148,0.6)
        }
        &:hover{
            .el-icon-edit{
                opacity: 1;
            }
        }

        .el-icon-plus{

        }
        
    }
}

</style>


